/* pages/orderFood.wxss */
//小字体
$small-size-rpx:24rpx;
//灰色字体
$grey:#8d8c8c;
.scroll-area {
  height: 100vh;
}
//固定在顶部的按钮
.button-items {
  height: 80rpx;
  width: 510rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 100rpx;

  image {
    width: 50rpx;
    height: 50rpx;
  }

  .back {

    //返回首页
    navigator {
      width: 50rpx;
      height: 50rpx;
    }
  }
}

.header {
  width: 100vw;
  height: 30vh;
  background-color: antiquewhite;
  padding: 100rpx 0 0 15rpx;
  // position: relative;
}

.main {
  border-radius: 30rpx;
  margin-top: -30rpx;
  background-color: white;
  height: calc(100vh - 300rpx);
  .shop {
    padding: 30rpx 0 15rpx 15rpx;
    border-bottom: 1.2px solid #e6e6e6;

    .shop-name {
      font-size: 20px;
      display: block;
    }

    .address {
      font-size: 12px;
      color: $grey;
    }
  }

  .menu {
    //左栏宽度
    $left-width:100rpx;
    display: flex;
    background-color: #f9f9f9;
    height: 100%;
    padding-top: 2px;
    //左栏食品类型
    .left {
      //每一个食品类型按钮的高度
      $item-hight:110rpx;
      width: $left-width;
      height: 12*$item-hight;
      margin-top: -4px;
      .item{
        margin-top: 4px;
        padding: 2px 5rpx 2px 0; 
        height: $item-hight;  
        width: 100%; 
        .tabs{ 
          height: 100%;          
          display: flex;
          justify-content: center;
          align-items: center;  
          margin-bottom: 4px;  
          padding-left: 15rpx;  
          border-radius: 2px;
          text {
            font-size: $small-size-rpx;
            text-align: center;
          }         
        } 
      }
      .slot{
        height: 3*$item-hight;
      }  
    }

    //右栏内容区域
    .right{
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      
      .container{
        width: 600rpx;
        height: 100%;
        padding-top: 5px;
        .advice{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;
          text{
            font-size: 0.8rem;
          }
        } 

        .food-list{
          .kind{
            >text{
              color: $grey;
              font-size: 0.8rem;
            }
            .nav{
              display: flex;
              gap: 20rpx;
              margin-top: 10px;
            }
            video{
              height: 300rpx;
            }
          }
        }
      }     
    }
  }
}

//左栏食品类型激活态样式
.active{
  background-color: #e40131; 
  color: #fff;
}